<style lang="sass" scoped>
    .container{
        padding-bottom:122px;
        background: #e6e6e6;
        -webkit-overflow-scrolling: auto;
    }
    .user{
        background:#ff6e6e;
        padding-top:36px;
        padding-bottom:50px;
        .head-img{
            width:150px;
            height:150px;
            border-radius:50%;
            border:1px solid #fff;
            background:#fff;
            margin: 0 auto ;
            display:block;
        }
        .text-cont{
            text-align:center;
            .sex{
                width:50px;
                height:50px;
                display:inline-block;
            }
            .text{
                height:50px;
                line-height:50px;
                font-size:45px;
                color:#fff;
                display:inline-block;
                margin-left:10px;
                margin-top:20px;
            }
        }
    }
    .tabs{
        height:110px;
        background: #fff;
        &>div{
            flex:1;
            height:110px;
            display:flex;
            align-items:center;
            justify-content:center;
            span{
                font-size:36px;
                color:#3c3c3c;
                display:inline-block;
                &.active{
                    color:#ff6e6e;
                    border-bottom:5px solid #ff6e6e;
                }
            }
        }
    }
    .bag{
        background:#fff;
        margin-top:10px;
        padding:18px 36px;
        .img{
            width:262px;
            height:262px;
            background:#ccc;
            position:relative;
            .item-img{
                display:block;
                width:100%;
                height:100%;
            }
            .check{
                width:60px;
                height:60px;
                position:absolute;
                left:20px;
                top:20px;
            }
        }
        .detail{
            width:388px;
            margin-left:30px;
            flex-direction: column;
            .detail-cont{
                flex:1;
                .name{
                    font-size:28px;
                    color:#3c3c3c;
                }
                .title{
                    font-size:22px;
                    color:#3c3c3c;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .paid{
                    font-size: 22px;
                    color: #bebebe;
                }
            }
            .buy{
                height: 56px;
                justify-content: space-between;
                .price{
                    width: 200px;
                    color: #ff6e6e;
                    .currency{
                        font-size: 22px
                    }
                    .big{
                        font-size: 44px;
                    }
                    .small{
                        font-size: 34px;
                    }
                }
                .btn{
                    width: 160px;
                    height: 56px;
                    line-height: 56px;
                    text-align: center;
                    font-size: 34px;
                    background:#ff6e6e;
                    color:#fff;
                }
            }
        }
    }
    .order-list{
        background:#e6e6e6;
        padding-top:28px;
        .group{
            background:#fff;
            margin-bottom:20px;
            .top{
                height:98px;
                width:100%;
                padding:0 30px;
                align-items:center;
                .top-detail{
                    flex:1;
                        .label,.text{
                        color:#bebebe;
                        font-size:18px;
                    }
                }
                .status{
                    width:140px;
                     color:#bebebe;
                    font-size:34px;
                    text-align:right;
                }
            }
            .item{
                background:#f0f0f0;
                margin-bottom:10px;
                padding:18px 36px;
                .img{
                    width:262px;
                    height:262px;
                    background:#ccc;
                    img{
                        display:block;
                        width:100%;
                        height:100%;
                    }
                }
                .detail{
                    width:388px;
                    margin-left:30px;
                    flex-direction: column;
                    .detail-cont{
                        flex:1;
                        .name{
                            font-size:28px;
                            color:#3c3c3c;
                        }
                        .title{
                            font-size:22px;
                            color:#3c3c3c;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        .paid{
                            font-size: 22px;
                            color: #bebebe;
                        }
                    }
                    .buy{
                        height: 56px;
                        justify-content: space-between;
                        align-items:center;
                        .price{
                            width: 300px;
                            color: #bebebe;
                            .currency{
                                font-size: 22px
                            }
                            .big{
                                font-size: 44px;
                            }
                        }
                        .nums{
                            width: flex;
                            height: 56px;
                            line-height: 56px;
                            text-align: right;
                            // font-size: 34px;
                            color:#bebebe;
                        }
                    }
                }
            }
            .fee{
                height:66px;
                align-items:center;
                padding:0 38px;
                .transfee{
                    width:220px;
                    font-size:24px;
                }
                .num{
                    flex:1;
                    text-align:right;
                    font-size:24px;
                }
                .price{
                    width:236px;
                    text-align:right;
                    font-size:24px;
                }
            }
            .btns{
                align-items:center;
                padding:0 38px;
                padding-bottom:22px;
                &.btns-type1{
                    justify-content:flex-end;
                    .btn{
                        margin-left:25px;
                    }
                }
                &.btns-type2{
                    justify-content:flex-end;
                    .text{
                        div{
                            color:#333;
                        }
                    }
                }
                &.btns-type3{
                    justify-content:flex-end;
                    .text{
                        div{
                            color:#bebebe;
                        }
                    }
                }
                .btn{
                    width:180px;
                    height:62px;
                    line-height:62px;
                    background:#ff6e6e;
                    border:1px solid #ff6e6e;
                    color:#fff;
                    font-size:26px;
                    text-align:center;
                    &.white{
                        border:1px solid #ff6e6e;
                        background:#fff;
                        color:#ff6e6e;
                    }
                }
                .car{
                    width:92px;
                    height:92px;
                }
                .dilivers{
                    flex:1;
                    height:62px;
                    background:#fff;
                    margin:0 15px;
                    align-items:center;
                    border:1px solid #ff6e6e;
                    .text{
                        flex:1;
                        margin-left:10px;
                        color:#ff6e6e;
                        text-align:center;
                        font-size:24px;
                        div{
                            font-size:12px;
                            line-height:24px;
                            &.text-top{
                                overflow : hidden;
                                text-overflow: ellipsis;
                                display:-webkit-box;
                                -webkit-line-clamp:3;
                                -webkit-box-orient: vertical;
                                height:70px;
                            }
                            &.text-bottom{
                                margin-top:3px;
                            }
                        }
                    }
                    img{
                        width:22px;
                        height:40px;
                        margin:0 10px;
                    }
                }
            }
            .del{
                height:50px;
                display:flex;
                align-items:center;
                justify-content:center;
                border-top:1px solid #efefef;
                img{
                    display:block;
                    width:30px;
                    height:30px;    
                }
            }
        }
    }
    .footer{
        position:fixed;
        z-index:10;
        bottom:0;
        left:0;
        height:122px;
        width:750px;
        background:#fff;
        .join,.buy{
            flex:1;
            height:122px;
            line-height:122px;
            text-align:center;
            color:#fff;
            font-size:34px;
        }
        .join{
            background:#fff;
            color:#ff6e6e;
        }
        .buy{
            background:#ff6e6e;
        }
    }

    .shade-cont{
        position:fixed;
        background:rgba(0,0,0,0.6);
        width:100%;
        height:100%;
        top:0;
        left:0;
        z-index:100;
        
        .logistics {
            width: 90vw;
            margin: 100px auto 0;
            background-color: #fff;
            height: 1000px;
            overflow-y: auto;
            .info-head {
                background-color: #ff6e6e;
                padding: 30px;
                height:150px;
                p {
                    color: #fff;
                    font-size: 28px;
                    line-height: 1.8;
                }
            }
            .item-block {
                padding: 30px;
                height:850px;
                overflow:scroll;
                .address {
                    margin-bottom: 20px;
                    .tag-address {
                        margin: 0;
                        width: 136px;
                        display: block;
                        float: left;
                        height: 40px;
                        // background-color: blue;
                    }
                    p {
                        float: left;
                        width: calc(100% - 156px);
                        font-size: 28px;
                        line-height: 1.5;
                        text-align: justify;
                        word-break: break-all;
                    }
                }
                .address,
                .item {
                    &:first-child{
                        .tag::after{
                            background-color:#ff6e6e;
                        }
                    }
                    .time {
                        padding-bottom: 20px;
                        width: 80px;
                        color: #333;
                        font-size: 24px;
                        display: inline-block;
                        // line-height: 1.2;
                        text-align: center;
                        .top{
                            font-size:28px;    
                        }
                        .bottom{
                            font-size:18px;    
                        }
                    }
                    .tag {
                        position: relative;
                        width: 1px;
                        margin: 0 20px;
                        background-color: #ddd;
                        content: '';
                    }
                    .tag::after {
                        position: absolute;
                        content: '';
                        left: -18px;
                        display: block;
                        border-radius: 50%;
                        width: 36px;
                        height: 36px;
                        background-color: #ddd;
                    }
                    .info {
                        flex: 1;
                        -webkit-box: 1;
                        -webkit-box-flex: 1;
                        padding-bottom: 20px;
                        margin-left: 10px;
                        p,
                        span {
                            font-size: 26px;
                            color: #333;
                            display: block;
                            text-align: justify-content;
                        }
                        p {
                            margin-top: 10px;
                            line-height: 1.3;
                            word-break: break-all;
                        }
                    }

                }
            }
        }
    }
    .noone{
        color:#acabab;
        text-align:center;
        padding-top:255px;
        font-size:24px;
    }
</style>
<template>
    <div class="container">
        <div class="user">
            <img :src="userInfo.headimgurl" class="head-img">
            <div class="text-cont">
                <img v-if="userInfo.sex===1" src="../../assets/images/home/icon_n.png" class="sex">
                <img v-if="userInfo.sex===2" src="../../assets/images/home/icon_v.png" class="sex">
                <div class="text">{{userInfo.nickname}}11</div>
            </div>
        </div>
        <div class="tabs flex">
            <div @click="type='bag'">
                <span :class="{'active':type==='bag'}">我的书袋</span>
            </div>
            <div @click="type='order'">
                <span :class="{'active':type==='order'}">历史订单</span>
            </div>
        </div>
        <template v-if="carlist.length>0">
            <router-link :to="{name:'detail',query:{itemCode:item.itemCode}}" v-if="type==='bag'" v-for="(item,i) in carlist" class="bag flex" tag="div">
                <div class="img">
                    <img @click.stop="checked(item,false)" v-show="item.isChecked===true" class="check" src="../../assets/images/home/qx.png" alt="">
                    <img @click.stop="checked(item,true)" v-show="item.isChecked===false" class="check" src="../../assets/images/home/qxd_h(1).png" alt="">
                    <img class="item-img" :src="item.itemImageUrl" alt="">
                </div>
                <div class="detail flex">
                    <div class="detail-cont">
                        <div class="name">{{item.itemName}}</div>
                        <div class="title">{{item.itemDesc}}</div>
                        <div class="paid">{{item.buyCount}}人付款</div>
                    </div>
                    <div class="buy flex">
                        <div class="price">
                            <span class="currency">￥</span>
                            <span class="big">{{item.price}}</span>
                        </div>
                        <div @click.stop="deleteShoppingCar(item)" class="btn">删除</div>
                    </div>
                </div>
            </router-link>
        </template>
        
        <div class="noone" v-if="carlist.length===0&&type==='bag'">书袋空空，快去书城逛逛吧</div>

        <div v-if="type==='order'" class="order-list">
            <div v-for="(item,i) in orderlist" class="group">
                <div class="top flex">
                    <div class="top-detail">
                        <div class="detail-group flex">
                            <div class="label">订单编号：</div>
                            <div class="text">{{item.orderNo}}</div>
                        </div>
                        <div class="detail-group flex">
                            <div class="label">订单生成时间：</div>
                            <div class="text">{{item.createTime}}</div>
                        </div>
                    </div>
                    <div class="status">{{item.statusName}}</div>
                </div>
                <div v-for="(item2,i2) in item.itemList" class="item flex">
                    <div class="img">
                        <img :src="item2.itemImageUrl" alt="">
                    </div>
                    <div class="detail flex">
                        <div class="detail-cont">
                            <div class="name">{{item2.itemName}}</div>
                            <div class="title">{{item2.itemDesc}}</div>
                        </div>
                        <div class="buy flex">
                            <div class="price">
                                <span class="currency">￥</span>
                                <span class="big">{{item2.price}}</span>
                            </div>
                            <div class="nums">X{{item2.count}}</div>
                        </div>
                    </div>
                </div>
                <div class="fee flex">
                    <div class="transfee">运费：￥{{item.carriageFee}}</div>
                    <div class="num">共{{item.itemNumber}}件商品：合计：</div>
                    <div class="price clearfix">
                        <span class="currency">￥</span>
                        <span class="text">{{item.realPayFee}}</span>
                    </div>
                </div>
                <!-- 状态 0-待付款，1-待发货，2-已发货，3-已签收，4-已完成，5-已取消，6-已售后 -->
                <div v-if="item.status===0" class="btns btns-type1 flex">
                    <div @click="cancelOrder(item)" class="btn white">取消订单</div>
                    <div @click="pay(item.orderNo)" class="btn">去付款</div>
                </div>
                <div v-if="item.status===1" class="btns btns-type1 flex">
                    <div @click="refund(item)" class="btn">退货</div>
                </div>
                <div v-if="item.status===2" class="btns btns-type2 flex">
                    <div @click="getLogisticsList(item)" class="dilivers flex">
                        <!-- <img src="../../assets/images/home/an_wly.png" alt="" class="car"> -->
                        <div class="text">查看物流详情</div>
                        <img src="../../assets/images/order/ts_xyx.png" alt="">
                    </div>
                    <div @click="sign(item)" class="btn">确认签收</div>
                </div>
                <!-- <div v-if="item.status===3" class="btns btns-type1 flex">
                    <div class="btn">确认收货</div>
                </div> -->
                <div v-if="item.status===4" class="btns btns-type3 flex">
                    <!-- <img src="../../assets/images/home/an_wln.png" alt="" class="car"> -->
                    <div @click="getLogisticsList(item)" class="dilivers flex">
                        <!-- <img src="../../assets/images/home/an_wly.png" alt="" class="car"> -->
                        <div class="text">查看物流详情</div>
                        <img src="../../assets/images/order/ts_xyx.png" alt="">
                    </div>
                    <div @click="salfOff()" class="btn">申请售后</div>
                </div>
                <div v-if="item.status===4" @click="deleteOrder(item.orderNo)" class="del">
                    <img src="../../assets/images/home/sc.png" alt="">
                </div>
            </div>
        </div>

        <div  v-if="type==='bag'" class="footer flex">
            <div @click="allChecked()" class="join">{{text}}</div>
            <div @click="goOrder()" class="buy">提交订单</div>
        </div>

        <!-- 物流详情 -->
        <div @click.stop="logisObj.show = false" v-if="logisObj.show" class="shade-cont">
            <div class="logistics">
                <div class="info-head">
                    <p>运单号：{{logisObj.logisticsNo}}</p>
                    <p>快递公司：{{logisObj.logisticsCompany}}</p>
                    <!-- <p>预计送达：10月21日</p> -->
                </div>
                <div class="item-block">
                    <!-- <div class="address clearfix">
                        <i class="tag-address"></i>
                        <p>广东省深圳市南山区南新路南苑街道六号802</p>
                    </div> -->
                    <div v-for="(item,i) in logisObj.datalist" class="item flex">
                        <div class="time">
                            <div class="top">{{item.monthDay}}</div>
                            <div class="bottom">{{item.hourMin}}</div>
                        </div>
                        <i class="tag"></i>
                        <div class="info">
                            <!-- <span>已签收</span> -->
                            <p>{{item.context}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { mapMutations } from 'vuex'
    export default{
        data(){
            return{
                type:'bag',//bag||order
                carlist:[],
                orderlist:[],
                userInfo:{},
                text:'全选',
                logisObj:{
                    show:false,
                    logisticsNo:'',
                    logisticsCompany:'',
                    datalist:[]
                }
            }
        },
        watch:{
            'type'(val){
                if(val==='bag'){
                    this.getShoppingCarList();
                }else{
                    this.getOrder();
                }
            }
        },
        created(){
            let userinfo = util.getStorage('local','userinfo');
            if (userinfo && JSON.parse(userinfo).openid){
                this.userInfo = JSON.parse(userinfo);
            }
        },
        mounted() {
            this.$nextTick(() => {
                $('body')[0].style.backgroundColor = '#e6e6e6';
                // this.getUserInfo();
                if(this.$route.query.type==='order'){
                    this.type = 'order';
                    this.getOrder();
                }else{
                    this.getShoppingCarList();
                }
            });
        },
        methods: {
            ...mapMutations("cart", ["RPODUCT_INIT"]),
            getShoppingCarList(){
                server.getShoppingCarList().then(data=>{
                    let list = [];
                    data.data.forEach((item,i) => {
                        item['isChecked'] = false;
                        list.push(item.itemCode)
                    });
                    this.RPODUCT_INIT(list);
                    this.carlist = data.data;
                })
            },
            deleteShoppingCar(item){
                popup.confirm({
                    content:'是否删除该商品？',
                    yes:()=>{
                        util.ajax({
                            url:config.baseApi + 'bookMall-h5/api/car/deleteShoppingCar',
                            data:{
                                shoppingCarId:item.shoppingCarId
                            },
                            success:(data=>{
                                this.getShoppingCarList();
                            })
                        })
                    }
                })
            },
            allChecked(){
                let list = JSON.parse(JSON.stringify(this.carlist));
                list.forEach((item,i) => {
                    item.isChecked = this.text==='全选'?true:false;
                });
                this.carlist = list;
                this.text==='全选'?this.text='全不选':this.text='全选'
            },
            // 提交订单
            goOrder(){
                let arr = [];
                let list = JSON.parse(JSON.stringify(this.carlist));
                list.forEach((item,i) => {
                    if(item.isChecked === true){
                        arr.push(item.shoppingCarId)
                    }
                });
                if(arr.length===0){
                    popup.alert({content:'请至少选择一个商品！'});
                    return;
                }
                router.push({name:'order_confirm',query:{shoppingCarIds:arr.toString()}})
            },
            getOrder(){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/order/getOrderListPage',
                    data:{
                        pageNo:1,
                        pageSize:999
                    },
                    success:(data)=>{
                        this.orderlist = data.data.record
                    }
                })
            },
            // getUserInfo(){
            //     util.ajax({
            //         url:config.baseApi + 'bookMall-h5/api/user/getUserInfo',
            //         success:(data)=>{
            //             this.userInfo = data.data
            //         }
            //     })
            // },
            cancelOrder(item){
                popup.confirm({
                    content:'是否取消该订单？',
                    yes:()=>{
                        util.ajax({
                            url:config.baseApi + 'bookMall-h5/api/order/cancelOrder',
                            data:{
                                orderNo:item.orderNo,
                            },
                            success:(data)=>{
                                this.getOrder();
                            }
                        })
                    }
                })
            },
            getWxH5PayConfig(orderNo){
                // router.replace({name:'order_pay_success'})
                // return;
                return new Promise((resolve,reject)=>{
                    util.ajax({
                        url:config.baseApi + 'bookMall-h5/api/pay/getWxH5PayConfig',
                        data:{
                            orderNo:orderNo
                        },
                        success:(data=>{
                            resolve(data.data);
                        })
                    })
                })
            },
            pay(orderNo){
                const WXPAY = (content)=>{
                    var PAY_SUCCESS = function(){
                        server.queryPayStatus(orderNo).then((res)=>{
                            if(!res){
                                timer +=1;
                                if(timer<5){
                                    setTimeout(() => {
                                        PAY_SUCCESS();
                                    }, 100);
                                }else{
                                    popup.alert({
                                        content:'订单异常，请稍后重试！',
                                        yes:()=>{
                                            router.replace({name:'hoome',query:{type:'order'}})
                                        }
                                    })
                                }
                                return;
                            }
                            router.replace({name:'order_pay_success'})
                        })
                    }

                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', {
                            "appId": content.appId, //公众号名称，由商户传入
                            "timeStamp": content.timeStamp, //时间戳，豪秒数
                            "nonceStr": content.nonceStr, //随机串
                            "package": content.package,
                            "signType": content.signType, //微信签名方式
                            "paySign": content.paySign //微信签名
                        }, res => {
                            if (res.err_msg == "get_brand_wcpay_request:ok") {
                                PAY_SUCCESS();
                            } else if (/cancel/.test(res.err_msg)) {
                                popup.miss({content:'支付已取消'});
                            } else if (/fail/.test(res.err_msg)) {
                                popup.miss({content:`支付失败【${res.err_msg}】`});
                            } else {
                                popup.miss({content:res.err_msg});
                            }
                        }
                    )
                }
                this.getWxH5PayConfig(orderNo).then(res=>{
                    WXPAY(res)
                })
            },
            sign(item){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/order/sign',
                    data:{
                        orderNo:item.orderNo,
                    },
                    success:(data)=>{
                        this.getOrder();
                    }
                })
            },
            salfOff(){
                popup.alert({content:'售后服务电话：XXXXX'})
            },
            refund(item){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/order/refund',
                    data:{
                        orderNo:item.orderNo,
                    },
                    success:(data)=>{
                        this.getOrder();
                        popup.miss({content:'申请已提交！'})
                    }
                })
            },
            checked(item,type){
                item.isChecked = type
                if(!type){
                    this.text='全选'
                }else{
                    let list = JSON.parse(JSON.stringify(this.carlist));
                    if(list.filter(res=>res.isChecked).length===list.length){
                        this.text='全不选'
                    }
                }
            },
            deleteOrder(orderNo){
                popup.confirm({
                    content:'确认删除',
                    yes:()=>{
                        util.ajax({
                            url:config.baseApi + 'bookMall-h5/api/order/deleteOrder',
                            data:{
                                orderNo:orderNo
                            },
                            success:(data=>{
                                popup.miss({content:'删除成功！'});
                            })
                        })
                    }
                })
            },
            getLogisticsList(item){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/order/getLogisticsList',
                    data:{
                        orderNo:item.orderNo
                    },
                    success:(data=>{
                        this.logisObj={
                            show:true,
                            logisticsNo:item.logisticsNo,
                            logisticsCompany:item.logisticsCompany,
                            datalist:data.data.contextList
                        }
                    })
                })
            }
        },
    }
</script>
